<template>
	<view>
		<!-- 没提交之前显示 -->
		<view>
			<!-- 第一行 -->
			<view class="dflex alc jcsb pl30 pr30" style="height: 122rpx;background-color: #fff;">
				<view class="fs32 color fw500">所在学校</view>
				<view style="width: 400rpx;text-align: right;">
					<input type="text" placeholder="请填写孩子所在学校" v-model="school" />
				</view>
			</view>
			<!-- 第二行 -->
			<view class="dflex alc jcsb pl30 pr30" style="height: 122rpx;background-color: #fff;">
				<view class="fs32 color fw500">所在年级</view>
				<view style="width: 400rpx;text-align: right;">
					<input type="text" placeholder="请填写孩子所在年级" v-model="grade" />
				</view>
			</view>
			<!-- 第三行 -->
			<view class="dflex alc jcsb pl30 pr30" style="height: 122rpx;background-color: #fff;">
				<view class="fs32 color fw500">所在班级</view>
				<view style="width: 400rpx;text-align: right;">
					<input type="text" placeholder="请填写孩子所在班级" v-model="classes" />
				</view>
			</view>
			<!-- 第四行 -->
			<view
				class="dflex alc jcsb pl30 pr30"
				style="height: 122rpx;background-color: #fff;"
				@click="changeNums"
			>
				<view class="fs32 color fw500">限购次数</view>
				<view style="width: 400rpx;text-align: right;" class="dflex alc">
					<input type="text" placeholder="请选择限购次数" disabled class="mr20" v-model="nums" />
					<image
						src="../../static/right.png"
						mode=""
						style="width: 30rpx;height: 30rpx;"
					></image>
				</view>
			</view>
			<!-- 第五行 -->
			<view class="dflex alc jcsb pl30 pr30" style="height: 122rpx;background-color: #fff;">
				<view class="fs32 color fw500">学生姓名</view>
				<view style="width: 400rpx;text-align: right;">
					<input type="text" placeholder="请填写孩子姓名" v-model="name" />
				</view>
			</view>
			<!-- 第六行 -->
			<view class="dflex alc jcsb pl30 pr30" style="height: 122rpx;background-color: #fff;">
				<view class="fs32 color fw500">家长手机</view>
				<view style="width: 400rpx;text-align: right;"><input type="text" :value="phone" /></view>
			</view>
			<!-- 第七行 -->
			<view class="dflex alc jcsb pl30 pr30" style="height: 122rpx;background-color: #fff;">
				<view class="fs32 color fw500">教室姓名</view>
				<view style="width: 400rpx;text-align: right;">
					<input type="text" placeholder="请填写教师姓名" v-model="teacher" />
				</view>
			</view>
			<view class="btn auto textc white fs32 fw900" @click="handerSubmit">
				{{ type ? '确认修改' : '提交' }}
			</view>
			<!-- 选择次数 -->
			<u-picker
				:show="showPicter"
				ref="uPicker"
				:columns="columns"
				@confirm="confirm"
				@cancel="cancel"
				@change="changeHandler"
				keyName="label"
				title="您希望孩子每天最多消费多少次"
			></u-picker>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: uni.getStorageSync('type'),
			showPicter: false,
			columns: [
				[
					{
						label: '一次',
						id: 1
						// ...
					},
					{
						label: '两次',
						id: 2
					},
					{
						label: '三次',
						id: 3
					}
				]
			],
			school: uni.getStorageSync('school'),
			grade: uni.getStorageSync('grade'),
			classes: uni.getStorageSync('classes'),
			nums: uni.getStorageSync('nums'),
			name: uni.getStorageSync('name'),
			teacher: uni.getStorageSync('teacher'),
			phone: uni.getStorageSync('phone'),
			stuInfo: ''
		};
	},
	methods: {
		handerSubmit() {
			if (!this.type) {
				if (
					!this.school ||
					!this.grade ||
					!this.classes ||
					!this.name ||
					!this.nums ||
					!this.teacher
				) {
					uni.showToast({
						title: '请填写完整的信息',
						icon: 'none'
					});
				} else {
					uni.setStorageSync('school', this.school);
					uni.setStorageSync('grade', this.grade);
					uni.setStorageSync('classes', this.classes);
					uni.setStorageSync('name', this.name);
					uni.setStorageSync('nums', this.nums);
					uni.setStorageSync('teacher', this.teacher);
					uni.setStorageSync('type', true);
					uni.navigateBack();
				}
			} else {
				console.log('确认修改');
				uni.setStorageSync('school', this.school);
				uni.setStorageSync('grade', this.grade);
				uni.setStorageSync('classes', this.classes);
				uni.setStorageSync('name', this.name);
				uni.setStorageSync('nums', this.nums);
				uni.setStorageSync('teacher', this.teacher);
				uni.setStorageSync('type', true);
				uni.navigateBack();
			}
		},
		//选择次数的方法
		confirm(e) {
			uni.setStorageSync('nums', e.value[0].label);
			this.nums = e.value[0].label;
			this.showPicter = false;
		},
		changeHandler(e) {
			console.log(e, 'changeHandler');
		},
		cancel() {
			this.showPicter = false;
		},
		changeNums() {
			this.showPicter = true;
		}
	},
	onLoad() {}
};
</script>

<style lang="scss">
.btn {
	width: 690rpx;
	height: 100rpx;
	line-height: 100rpx;
	background: linear-gradient(90deg, #8092eb 0%, #4151db 100%);
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	position: fixed;
	bottom: 40rpx;
	left: 30rpx;
}
::v-deep .u-toolbar__title {
	margin-top: 171rpx;
	z-index: 999;
	display: block;
	width: 750rpx;
	padding: 0 !important;
	color: #333 !important;
}
</style>
